<template>
  <div class="wrap">
    <div id="page">
      <!-- 头部 -->
      <header>
        <v-back></v-back>
        <h2>分类</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <span class="iconfont">&#xe71e;</span>
          <i></i>
        </p>
      </header>
      <!-- 搜索 -->
      <div id="search">
        <input type="text" class="iconfont" placeholder="按内容搜索" @keydown.enter="search" v-model="form.keywords"/>
      </div>
      <!-- 主体 -->
      <main>
        <nav>
          <a href="#" v-for="(item,index) in cateList" :key="item.id" :class="index==current?'cur':''" @click.prevent="goSort(item.id)">{{item.catename}}</a>
          <!-- <a href="#" class="cur">美妆</a>
          <a href="#">酒水</a>
          <a href="#">小家电</a>
          <a href="#">服饰</a>
          <a href="#">鞋靴</a>
          <a href="#">饰品</a>
          <a href="#">箱包</a>
          <a href="#">饰品</a>
          <a href="#">箱包</a>
          <a href="#">家电</a>
          <a href="#">厨卫</a>
          <a href="#">汽配</a> -->
        </nav>
        <ul>
          <li>
            <h2>热门精选</h2>
            <div class="product">
              <p v-for="item in cateList2" :key="item.id" @click="goGoods(item.id)">
                <img :src="$pre+item.img" alt="" />
                <span>{{item.catename}}</span>
              </p>
              <!-- <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p> -->
            </div>
          </li>
          <!-- <li>
            <h2>面部护肤</h2>
            <div class="product">
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
            </div>
          </li>
          <li>
            <h2>个护工具</h2>
            <div class="product">
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop_bg1.png" alt="" />
                <span>热卖爆品</span>
              </p>
              <p>
                <img src="images/shop.jpg" alt="" />
                <span>热卖爆品</span>
              </p>
            </div>
          </li> -->
        </ul>
      </main>
    </div>
  </div>
</template>

<script>
import {mapActions,mapGetters} from "vuex"
import {search} from "../../request/api"
export default {
  data(){
    return{
      form:{
        cateid:"",
        keywords:""
      },
      current:0
    }
  },
  methods:{
    ...mapActions({
      asyncCateList:"sort/asyncChangeOne",
      asyncCateList2:"sort/asyncChangeTwo"
    }),
    //左侧列表
    goSort(id){
      this.asyncCateList2(id)
      this.current=id-1
    },
    //头部搜索框
    search(){
      this.$router.push("/goods?keywords="+this.form.keywords)
    },
    //右侧商品
    goGoods(id){
      this.$router.push("/goods?id="+id)
    }
  },
  computed:{
    ...mapGetters({
      cateList:"sort/one",
      cateList2:"sort/two"
    })
  },
  mounted(){
    this.asyncCateList();

      // getGoodlist2({cateid:this.cateList.id,type:2}).then(res=>{
      //   console.log(res);
      // })
  }

};
</script>

<style scoped>
html,
body,
#page {
  height: 100%;
}
#page {
  max-width: 7.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.wrap{
  height: 100vh;
}
/*头部*/
header {
  height: 0.8rem;
  background: #ff6040;
  display: flex;
  color: #ffdfd8;
  padding: 0.3rem 0.12rem 0.12rem 0.33rem;
  align-items: center;
}
header h2 {
  font-size: 0.3rem;
  margin: 0 1.6rem 0 2.7rem;
}
header p {
  width: 1.72rem;
  height: 0.62rem;
  border: 1px solid #ff876c;
  border-radius: 0.31rem;
  line-height: 0.62rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
header p span {
  width: 0.86rem;
  text-align: center;
}
header p i {
  width: 1px;
  height: 0.37rem;
  background: #ff876c;
  position: absolute;
  left: 0.86rem;
  top: 0.12rem;
}
#search {
  background: linear-gradient(#ff6547, #ff877b);
  text-align: center;
  padding: 0.2rem 0 0.2rem;
  box-sizing: border-box;
}
#search input {
  width: 7.06rem;
  height: 0.6rem;
  border: 0.02rem solid #e6e6e6;
  border-radius: 0.1rem;
}
#search input::placeholder {
  font-size: 0.26rem;
  color: #999999;
  padding-left: 0.22rem;
  box-sizing: border-box;
}
main {
  display: flex;
  flex: 1;
  overflow: auto;
}
main nav {
  display: flex;
  flex-direction: column;
  width: 31%;
  background: #fff;
  padding-top: 0.61rem;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  overflow: auto;
}
main nav p {
  font-size: 0.26rem;
  color: #999999;
  padding-bottom: 0.61rem;
}
main nav .cur {
  font-weight: bold;
  color: #ff6040;
}
main ul {
  width: 69%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main ul li {
  width: 4.65rem;
  background: #fff;
  margin-top: 0.3rem;
  padding: 0.4rem 0;
}
main ul li h2 {
  font-size: 0.3rem;
  color: #333333;
  margin: 0.21rem 0 0 0.21rem;
}
main ul li .product {
  padding-left: 0.2rem;
  box-sizing: border-box;
}
main ul li .product p {
  color: #9b9b9b;
  font-size: 0.22rem;
  width: 1.28rem;
  text-align: center;
  float: left;
  margin: 0.2rem 0.2rem 0 0;
}
main ul li .product p img {
  width: 100%;
}
footer {
  display: flex;
  height: 1.66rem;
  background: #fff;
  border-top: 1px solid #cccccc;
  padding: 0 0.72rem;
  box-sizing: border-box;
  justify-content: space-between;
}
footer p {
  color: #999999;
  height: 1.66rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer p .iconfont {
  font-size: 0.4rem;
}
footer p span {
  font-size: 0.18rem;
}
footer .cur {
  color: #ff6040;
}
</style>